<template>
	<view class="mydetail-body">
		<view class="ava-view tn-padding-sm tn-flex-direction-row tn-flex-row-center tn-flex border-line-view"
			@touchend="changeAvatar">
			<tn-avatar class="avatar-clas" size="xl" :src="avatarUrl"></tn-avatar>
			<view class="right-xiugai-icon">
				<text>修改</text>
				<view class="tn-icon-right"></view>
			</view>
		</view>
		<view class="height-100 tn-flex tn-flex-row-between tn-padding border-line-view">
			<view class="width-150 tn-text-left">
				姓名
			</view>
			<view class="">
				{{childInfo.name}}
			</view>
		</view>
		<view class="height-100 tn-flex tn-flex-row-between tn-padding border-line-view">
			<view class="width-150 tn-text-left">
				班级
			</view>
			<view class="">
				{{childInfo.className}}
			</view>
		</view>
		<view class="height-100 tn-flex tn-flex-row-between tn-padding border-line-view">
			<view class="width-150 tn-text-left">
				学号
			</view>
			<view class="">
				{{childInfo.studentNumber}}
			</view>
		</view>
		<view class="height-100 tn-flex tn-flex-row-between tn-padding border-line-view">
			<view class="width-150 tn-text-left">
				性别
			</view>
			<view class="">
				{{childInfo.genderSte}}
			</view>
		</view>
		<view class="height-100 tn-flex tn-flex-row-between tn-padding border-line-view">
			<view class="width-150 tn-text-left">
				出生日期
			</view>
			<view class="">
				{{childInfo.birthdayStr}}
			</view>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default {
		name: 'mydetail',
		data() {
			return {
				avatarUrl: 'https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2',
				loginType: 2,
				imageTitle: '',
				userInfo:{},
				childInfo:{},
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			uni.$on('avatarfile', (data) => {
				console.log('监听-----------', data)
				this.updateAvatar(data);
			})
			this.getChildInfo();
		},
		methods: {
			getChildInfo(){
				this.request({
					url: '/Children/MobileChildInfo',
					method: 'get',
				}).then(res => {
					if(res.code == 200){
						this.childInfo = res.data?res.data:{};
						this.avatarUrl = this.imageTitle + this.childInfo.imgId;
						console.log(this.avatarUrl)
					}else{
						this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
						})
					}
				})
			},
			updateAvatar(data){
				if(data.page == 'baobao'){
					let postData = {
						imgId: data.imgId,
						childId: this.userInfo.childId
					}
					this.editFunction(postData, 'avatar');
				}
			},
			
			changeAvatar(){
				// uni.navigateTo({
				// 	url: '/pages/my/avatar?page=myDetail',
					
				// })
				let that = this;
				wx.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
				   success: chooseResult => {
						console.log(chooseResult)
						let file = chooseResult.tempFiles[0];
						that.uploadPhoto(file, '', (resData) => {
							if(resData.code == 200){
									let postData = {
										imgId: resData.data,
										childId: this.userInfo.childId
									}
									this.editFunction(postData, 'avatar');
								that.avatarUrl = that.imageTitle + resData.data;
							}
						})
					}
				})
			},
			
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						
							  this.$refs.toast.show({
							    title: '',
							    content: '上传错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						console.log(err)
					}
				});
			},
			editFunction(postData, changeType){
				this.request({
					url: '/Children/MobileUpdateHeadshot',
					method: 'post',
					params: postData
				}).then(res => {
					if(res.code == 200){
						this.avatarUrl = this.imageTitle + postData.imgId;
						this.$refs.toast.show({
								    title: '',
								    content: '保存成功',
								    icon: 'success',
								    image: '',
								    duration: 1000
						})
					}else{
						this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.mydetail-body {

		height: 100vh;
		background-color: rgba(245, 245, 245, 1);
	}

	.position-relateve {
		position: relative;
	}

	.right-xiugai-icon {
		position: absolute;
		right: 15px;
		top: 36px;
	}

	.tn-icon-right {
		display: inline-block;
	}

	.avatar-clas {}

	.ava-view {
		height: 160rpx;
	}

	.height-100 {
		height: 100rpx;
		height: 100rpx;
	}

	.width-150 {
		width: 150rpx;
	}
</style>
